<template>
    <span id="star">
        <span class="star-item" v-for='(itemClass, index) in itemClasses' :class="itemClass + size + ' ' + 'star' + size" :key="index"></span>
    </span>
</template>

<script>

const LENGTH = 5;
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';

export default {   
    name: 'star',
    props: {
        score: {
            type: Number,
        },
        size: {
            type: Number
        }
    },
    computed:{
		itemClasses () {
			let result = []
			let score = Math.floor(this.score * 2) / 2
			let halfStar = score % 1 !== 0
			let allStar = Math.floor(score)
			for(let i = 0; i < allStar; i++) {
				result.push(CLS_ON)
			}
			if(halfStar) {
				result.push(CLS_HALF)
			}
			while(result.length < LENGTH) {
				result.push(CLS_OFF)
			}
			return result
		}
	}
}
</script>

<style lang="stylus" ref="stylesheet/stylus">
@import "../assets/stylus/index.styl";
#star
    font-size:0
    display:inline-block
    .star-item
        display:inline-block
        width: 12px
        height: 12px
        margin-right: 2px
        background-repeat:no-repeat
        background-size: 12px 12px
        &:last-child
            margin-right:0
        &.star48
            width 24px
            height 24px
            margin-right 16px
            background-size 24px 24px
        &.star36 
            width 18px
            height 18px
            margin-right 2px
            background-size 18px 18px
    .on24
    	bg-image(star24_on)
    .half24
    	bg-image(star24_half)
    .off24
    	bg-image(star24_off)

    .on36
    	bg-image(star36_on)
    .half36
    	bg-image(star36_half)
    .off36
    	bg-image(star36_off)
    
    .on48
    	bg-image(star48_on)
    .half48
    	bg-image(star48_half)
    .off48
    	bg-image(star48_off)

</style>
